<template>
    <div class="body">
        <h1>修改密码</h1>
        <div class="perssonal">
            
            <p><span class="label">用户名：<Input v-model="name" placeholder="请输入用户名..." style="width: 300px"></Input>
</span>  </p>
            <p><span class="label">手机号：<Input v-model="phone" placeholder="请输入手机号..." style="width: 300px"></Input>
</span> </p>
            <p><span class="label">新密码：<Input v-model="password" type="password" placeholder="请输入新密码..." style="width: 300px"></Input>
</span> </p>
         <p>验证码：<Input v-model="code" style="width:100px;" placeholder="请输入验证码"></Input><Button :disabled="disabled" style="margin-left:36px;" @click="codeBtn">{{ codeText}}</Button> </p>



            <Button type="primary" class="button" @click = "editMySelf">确定</Button>

        </div>

        
    </div>
</template>
<script>
    export default {
        data () {
            return {
               
                name:'',
                phone:'',
                codeText:'获取验证码',
                disabled:false,
                code:'',
                testCode:'',
                password:'',
                id:'',
                
            }
        },
        created() {

        },
        methods:{


            editMySelf() {

                if(this.name == ''){

                    this.$Message.error('请输入用户名..');
                    return;

                }else if(this.phone == ''){
                    this.$Message.error('请输入手机号..');
                    return;
                }else if(this.password == ''){
                    this.$Message.error('请输入新密码..');
                    return;
                }else if(this.code == ''){
                    this.$Message.error('请输入验证码..');
                    return;
                }else if(this.testCode != this.code){
                    this.$Message.error('输入验证码不正确..');
                    return;
                }else{


                this.$http.post('/member/'+ this.$router.app.user_id +  '/edit',{name:this.name,password:this.password,phone:this.phone,code:this.code}).then(ret => {

                   this.$Message.success( '修改密码成功');

                   window.localStorage.removeItem('ccm-token');

                   this.$router.push({path:'/login'});

                }).catch(err => {

                    this.$Message.error( '修改密码失败');
                
                })
                       

             }
                

            },
           
            codeBtn (){

                if(this.phone == ''){

                    this.$Message.error('请输入手机号..');
                    return;

                }else{

                    // 获取验证码

                    let sec =30;

                    for(let  i=0; i<=30; i++){

                       var that = this;

                       window.setTimeout(function(){

                           if (sec != 0) {

                             that.codeText =  sec + "秒后重发验证" ;
                             that.disabled = true;
                             sec--;

                         } else {

                             sec = 30;//如果倒计时结束就让获取验证码显示出来
                             that.disabled = false;
                             that.codeText =  "获取验证码" ;

                        }
                       }, i * 1000)
                    }

                    this.$http.post('http://ccm.app/sendMsg',{phone:this.phone}).then(ret => {

                        this.testCode = ret.data.code;

                        console.log(ret.data.code);

                        this.$Message.success('获取验证码成功');

                    }).catch(err => {

                        console.log(err);

                        this.$Message.error('获取验证码失败..');
                    
                    })

                }
                
            }
    }
}
</script>

<style scoped>
    
.body{
    width:1200px;
    min-height: 620px;
    margin:0 auto;
}
.body h1{
     text-align: center;
    height: 60px;
    line-height: 60px;
    font-size: 22px;
    margin: 0 auto;
    color: #fff;
    background: #cd0000;
    margin-top: 100px;
    border-radius: 6px 6px 0 0;
    width: 482px;
}

.perssonal{
    width: 482px;
    padding: 40px;
    border-radius: 0 0 6px 6px;
    border:1px solid #ddd;
    margin: 0 auto 20px;
    display:flex;
    flex-direction: column;
}
.status_text{
    display: inline-block;
    background: #cd0000;
    height: 16px;
    line-height: 16px;
    padding: 0 6px;
    border-radius: 6px;
    font-size:12px;
    color: #fff;
}

.perssonal p{
    cursor: pointer;
    flex:1;
    height: 48px;
    line-height: 48px;
    padding-left: 10%;

}

.button{
   margin-top:18px;
   height:42px;
   font-size:14px;
   width:120px;
    text-align:center;
    background:#cd0000;
    border-radius:4px;
    color:#fff;
    margin: 16px auto 6px;
    position: relative;
    top: 24px;
}
    
</style>
